<template>
    <div class="main">
        <div class="left">
            <div class="title">
                <p>本月隐患综合分析</p>
            </div>
            <div class="cent">
                <div id="container1"></div>
            </div>
            <div class="title">
                <p>整改情况分析</p>
            </div>
            <div class="cent">
                <div id="container2"></div>
            </div>
            <div class="title">
                <p>隐患类型分析</p>
            </div>
            <div class="cent">
                <div id="container3"></div>
            </div>
        </div>
        <div class="centent">
            <div class="title">
                <p>最新质量动态</p>
            </div>
            <div class="cent2" style="  position: relative;">
                <img :src="oss + url" alt srcset width="904px" height="497px" />
                <!-- <div class="pos1">
                    <div class="posC1">
                        <p class="posC1Text">BIM进度</p>
                    </div>
                    <div style="height:24px"></div>

                    <div class="posC1" @click="videoShow = !videoShow">
                        <p class="posC1Text">航拍进度</p>
                    </div>
                </div>-->

                <!-- <video
                    class="vid"
                    src="https://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/ztsjxcp.mp4"
                    type="video/mp4"
                    controls="controls"
                    autoplay="autoplay"
                    v-if="videoShow"
                ></video>-->
            </div>
            <div class="bl">
                <div class="c2">
                    所有问题
                    <span class="c4">{{ arrly.CountAll }}个</span>
                </div>
                <div class="c2">
                    已整改
                    <span class="c4">{{ arrly.CountYZG }}个</span>
                </div>
                <div class="c2">
                    未整改
                    <span class="c4">{{ arrly.CountWZG }}个</span>
                </div>
                <div class="c2">
                    逾期未整改比例
                    <span
                        class="c4"
                    >{{ (arrly.CountWZG / arrly.CountAll * 100).toFixed(2) }}%</span>
                </div>
            </div>
            <div class="title">
                <p>分包单位隐患分析</p>
            </div>
            <div class="cent3">
                <div id="container4" style="padding: 0px 150px;"></div>
            </div>
        </div>

        <div class="right">
            <div class="title">
                <p>隐患详情</p>
            </div>
            <div class="cent1">
                <div class="p24">
                    <div class="jinduTop">
                        <div class="blueFont1">时间</div>
                        <div class="blueFont1">隐患内容</div>
                        <div class="blueFont1">照片</div>
                    </div>
                    <div class="jinduC scoll">
                        <div v-for="(item,index) in tableList" :key="index" class="flex">
                            <div class="blueFont2 mt24">{{ item.plan_time }}</div>
                            <div class="blueFont2">{{ item.description }}</div>
                            <div class="blueFont2">
                                <img :src="oss + item.url" alt srcset width="100px" height="80px" />
                            </div>
                            <!-- <div>
                                <div class="aaa">
                                    <div class="time">计划：{{ item.start_time }}~{{ item.end_time }}</div>
                                    <div
                                        class="time"
                                    >实际：{{ item.start_time }}~{{ item.practical_time ? item.practical_time : '暂无' }}</div>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>
            </div>

            <div class="title">
                <p>区域分布分析</p>
            </div>
            <div class="cent">
                <div class="p16">
                    <div class="zhfx" v-for="(item,index) in reasonsList" :key="index">
                        <p class="zhTest">
                            {{ item.process_name }}
                            <span style="float:right">{{ item.count }}次</span>
                        </p>
                        <p class="zhTest1" :style="{ width: 26 * item.count + 'px' }"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
    data() {
        return {
            oss: "http://jjjt.oss-cn-shanghai.aliyuncs.com/",

            url: "",
            jindu: "",
            reasons: "",
            reasonsList: "",
            reasonsAll: "",
            liCheng: "",
            chanZ: "",
            sum: "",
            pro: 0,
            videoShow: false,
            arrly: "",
            tableList: ""
        };
    },
    created() { },
    mounted() {

        // 进度对比
        this.$api
            .count_PCComparison({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;
                for (let i = 0; i < data.length; i++) {

                    data[i].jihua = data[i].jihua.split(',');
                    data[i].shiji = data[i].shiji.split(',');

                }
                // console.log(data)
                this.jindu = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });


        // 总数
        this.$api
            .LagReasonsCountLagReasonsAll({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                // console.log(data)
                this.reasonsAll = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        // 滞后分析

        this.$api
            .LagReasonsCountLagReasons({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data;

                // console.log(data)
                this.reasons = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        // 里程碑

        // 产值 ValueRecordValueRecordCount

        this.$api
            .ValueRecordValueRecordCount({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                // console.log(data)
                this.chanZ = data;
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        this.$api
            .ValueZSumValue({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data[0].altogether;

                // console.log(data)
                this.sum = data;

                // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
            })
            .catch((error) => {
                console.log("错误:", error);
            });
        this.$api
            .riskshowFindRiskshowByNew({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                // console.log(data)

                this.url = data.url.substr(1, data.url.length - 2);
                // this.sum = data;

                // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        this.$api
            .riskshowSelect_Riskshow_Month({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data;

                console.log(data)


                for (let i = 0; i < data.length; i++) {
                    data[i].url = data[i].url.substr(1, data[i].url.length - 2);

                }


                this.tableList = data;

                // this.url = data.url.substr(1, data.url.length - 2);
                // this.sum = data;

                // this.pro = (chanZ.sumValueAll / sum * 100).toFixed(2)
            })
            .catch((error) => {
                console.log("错误:", error);
            });

        this.$api
            .count_PCCountRiskshowByProcessId({ section_id: localStorage.getItem("section_id") })
            .then((res) => {
                let data = res.data.data;
                console.log(data)

                this.reasonsList = data
            })
            .catch((error) => {
                console.log("错误:", error);
            });


        // 表格



        this.chanZhi();
        this.zgfx();
        this.bingtu();
        this.aff();
    },
    methods: {

        // bingtu

        bingtu() {

            // count_App/CountQualityshowByRiskId 

            // count_App/CountQualityshowByRiskId

            this.$api
                .count_AppCountRiskshowByRiskId({ section_id: localStorage.getItem("section_id") }).then((res) => {
                    let data = res.data.data;

                    //  const data = [
                    //             { item: '事例一', count: 40, percent: 0.4 },
                    //             { item: '事例二', count: 21, percent: 0.21 },
                    //             { item: '事例三', count: 17, percent: 0.17 },
                    //             { item: '事例四', count: 13, percent: 0.13 },
                    //             { item: '事例五', count: 9, percent: 0.09 },
                    //         ];




                    let sum = 0;
                    for (let i = 0; i < data.length; i++) {
                        // data[i].percent = 0.04;
                        // data[i]
                        sum += parseInt(data[i].count)
                    }
                    for (let i = 0; i < data.length; i++) {
                        data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
                        // data[i]
                        data[i].percent = data[i].percent;
                        // console.log(data[i].percent);
                        // sum += parseInt(data[i].count)
                    }
                    console.log(data);
                    const chart = new Chart({
                        container: 'container3',
                        autoFit: true,
                        height: 240,
                    });

                    chart.coordinate('theta', {
                        radius: 0.75,
                    });

                    chart.data(data);

                    // chart.scale('percent', {
                    //     formatter: (val) => {
                    //         val = val * 100 + '%';
                    //         return val;
                    //     },
                    // });

                    chart.tooltip({
                        showTitle: false,
                        showMarkers: false,
                    });
                    // ${data.percent * 100}: %
                    chart
                        .interval()
                        .position('percent')
                        .color('risk_name')
                        .label('percent', {
                            content: (data) => {
                                return `${data.risk_name}`;
                            },
                        })
                        .adjust('stack');

                    chart.interaction('element-active');

                    chart.render();


                }).catch((err) => {

                })




        },



        aff() {
            const data = [
                { item: '事例一', count: 40, percent: 0.4 },
                { item: '事例二', count: 21, percent: 0.21 },
                { item: '事例三', count: 17, percent: 0.17 },
                { item: '事例四', count: 13, percent: 0.13 },
                { item: '事例五', count: 9, percent: 0.09 },
            ];


            this.$api
                .count_AppCountRiskshowBySubId({ section_id: localStorage.getItem("section_id") }).then((res) => {
                    let data = res.data.data;
                    let sum = 0;
                    for (let i = 0; i < data.length; i++) {
                        // data[i].percent = 0.04;
                        // data[i]
                        sum += parseInt(data[i].count)
                    }
                    for (let i = 0; i < data.length; i++) {
                        data[i].percent = (parseInt(data[i].count) / sum).toFixed(2) - 0.001;
                        // data[i]
                        data[i].percent = data[i].percent;
                        // console.log(data[i].percent);
                        // sum += parseInt(data[i].count)
                    }
                    // console.log(sum);
                    // console.log(data);

                    const chart = new Chart({
                        container: 'container4',
                        autoFit: true,
                        height: 240,
                        padding: [0, 0, 0, 0],
                        appendPadding: [0, 0, 0, 200],
                    });
                    // 新建一个 view 用来单独渲染Annotation
                    const innerView = chart.createView();
                    chart.coordinate('theta', {
                        radius: 0.75,
                        innerRadius: 0.75,
                    });

                    chart.data(data);


                    // chart.scale('percent', {
                    //     formatter: val => {
                    //         val = val * 100 + '%';
                    //         return val;
                    //     },
                    // });

                    chart.tooltip(false);

                    // 声明需要进行自定义图例字段： 'item'
                    chart.legend('sub_name', {
                        position: 'left',                                  // 配置图例显示位置
                        custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
                        items: data.map((obj, index) => {
                            return {
                                name: obj.sub_name,                                 // 对应 itemName
                                // value: obj.percent,                             // 对应 itemValue
                                marker: {
                                    symbol: 'circle',                             // marker 的形状
                                    style: {
                                        r: 5,                                       // marker 图形半径
                                        fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                                    },
                                },                                              // marker 配置
                            };
                        }),
                        sub_name: {
                            style: {
                                fill: '#999',
                            },                                               // 配置 itemValue 样式
                            formatter: val => `${val}`                // 格式化 itemValue 内容
                        },
                    });

                    chart
                        .interval()
                        .adjust('stack')
                        .position('percent')
                        .color('sub_name')
                        .style({
                            fillOpacity: 1,
                        })
                        .state({
                            active: {
                                style: element => {
                                    const shape = element.shape;
                                    return {
                                        lineWidth: 2,
                                        stroke: shape.attr('fill'),
                                        strokeOpacity: shape.attr('fillOpacity'),
                                    };
                                },
                            },
                        });

                    // 移除图例点击过滤交互
                    chart.removeInteraction('legend-filter');
                    chart.interaction('element-active');

                    chart.render();

                    // 监听 element 上状态的变化来动态更新 Annotation 信息
                    chart.on('element:statechange', (ev) => {
                        const { state, stateStatus, element } = ev.gEvent.originalEvent;

                        // 本示例只需要监听 active 的状态变化
                        if (state === 'active') {
                            const data = element.getData();
                            if (stateStatus) {
                                // 更新 Annotation
                                updateAnnotation(data);
                            } else {
                                // 隐藏 Annotation
                                clearAnnotation();
                            }
                        }
                    });

                    // 绘制 annotation
                    let lastItem;
                    function updateAnnotation(data) {
                        if (data.sub_name !== lastItem) {
                            innerView.annotation().clear(true);
                            innerView
                                .annotation()
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.sub_name,
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: -20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    // content: data.count,
                                    style: {
                                        fontSize: 28,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetX: -10,
                                    offsetY: 20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    // content: '台',
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: 20,
                                    offsetX: 20,
                                });
                            innerView.render(true);
                            lastItem = data.sub_name;
                        }
                    }

                    // 清空 annotation
                    function clearAnnotation() {
                        innerView.annotation().clear(true);
                        innerView.render(true);
                        lastItem = null;
                    }
                }).catch((err) => {

                })





        },


        // 整改情况分析
        zgfx() {




            this.$api
                .count_AppCountRiskshow({ section_id: localStorage.getItem("section_id") })
                .then((res) => {

                    const data = [
                        { item: '已整改', count: 40, percent: 0 },
                        { item: '未整改', count: 21, percent: 0 },
                        { item: '超期未整改', count: 17, percent: 0 },
                        // { item: '事例四', count: 13, percent: 0.13 },
                        // { item: '事例五', count: 9, percent: 0.09 },
                    ];
                    let arrly = res.data.data;

                    // console.log(arrly)
                    this.arrly = arrly;
                    data[0].count = arrly.CountYZG;
                    data[0].percent = (arrly.CountYZG / arrly.CountAll).toFixed(2) - 0.0001;
                    // console.log(data[0].percent)
                    data[1].count = arrly.CountWZG;
                    data[1].percent = (arrly.CountWZG / arrly.CountAll).toFixed(2);
                    data[2].count = arrly.CountCQWZG;
                    data[2].percent = (arrly.CountCQWZG / arrly.CountAll).toFixed(2);


                    const chart = new Chart({
                        container: 'container2',
                        autoFit: true,
                        height: 240
                    });
                    // 新建一个 view 用来单独渲染Annotation
                    const innerView = chart.createView();
                    chart.coordinate('theta', {
                        radius: 0.75,
                        innerRadius: 0.75,
                    });

                    chart.data(data);

                    chart.scale('percent', {
                        formatter: val => {
                            val = val * 100 + '%';
                            return val;
                        },
                    });

                    chart.tooltip(false);

                    // 声明需要进行自定义图例字段： 'item'
                    chart.legend('item', {
                        position: 'right',                                  // 配置图例显示位置
                        custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
                        items: data.map((obj, index) => {
                            return {
                                name: obj.item,                                 // 对应 itemName
                                value: obj.percent,                             // 对应 itemValue
                                marker: {
                                    symbol: 'square',                             // marker 的形状
                                    style: {
                                        r: 5,                                       // marker 图形半径
                                        fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
                                    },
                                },                                              // marker 配置
                            };
                        }),
                        itemValue: {
                            style: {
                                fill: '#999',
                            },                                               // 配置 itemValue 样式
                            formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
                        },
                    });

                    chart
                        .interval()
                        .adjust('stack')
                        .position('percent')
                        .color('item')
                        .style({
                            fillOpacity: 1,
                        })
                        .state({
                            active: {
                                style: element => {
                                    const shape = element.shape;
                                    return {
                                        lineWidth: 10,
                                        stroke: shape.attr('fill'),
                                        strokeOpacity: shape.attr('fillOpacity'),
                                    };
                                },
                            },
                        });

                    // 移除图例点击过滤交互
                    chart.removeInteraction('legend-filter');
                    chart.interaction('element-active');

                    chart.render();

                    // 监听 element 上状态的变化来动态更新 Annotation 信息
                    chart.on('element:statechange', (ev) => {
                        const { state, stateStatus, element } = ev.gEvent.originalEvent;

                        // 本示例只需要监听 active 的状态变化
                        if (state === 'active') {
                            const data = element.getData();
                            if (stateStatus) {
                                // 更新 Annotation
                                updateAnnotation(data);
                            } else {
                                // 隐藏 Annotation
                                clearAnnotation();
                            }
                        }
                    });

                    // 绘制 annotation
                    let lastItem;
                    function updateAnnotation(data) {
                        if (data.item !== lastItem) {
                            innerView.annotation().clear(true);
                            innerView
                                .annotation()
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.item,
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: -20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    content: data.count,
                                    style: {
                                        fontSize: 28,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetX: -10,
                                    offsetY: 20,
                                })
                                .text({
                                    position: ['50%', '50%'],
                                    content: '个',
                                    style: {
                                        fontSize: 20,
                                        fill: '#8c8c8c',
                                        textAlign: 'center',
                                    },
                                    offsetY: 20,
                                    offsetX: 20,
                                });
                            innerView.render(true);
                            lastItem = data.item;
                        }
                    }

                    // 清空 annotation
                    function clearAnnotation() {
                        innerView.annotation().clear(true);
                        innerView.render(true);
                        lastItem = null;
                    }


                    // this.chanZ = data;
                })
                .catch((error) => {
                    console.log("错误:", error);
                });



        },

        // 隐患分析
        chanZhi() {
            this.$api
                .count_PCRiskshowByMonth({ section_id: localStorage.getItem("section_id"), station_id: localStorage.getItem("station_id") })
                .then((res) => {
                    let data = res.data;

                    // console.log(data);

                    // console.log(data)
                    const chart = new Chart({
                        container: 'container1',
                        autoFit: true,
                        height: 240,
                        padding: [30, 20, 70, 30]
                    });

                    chart.data(data);
                    chart.scale({
                        value: {
                            min: 0,
                            max: 5,
                            alias: "实际产值"
                        },
                        // planValue: {
                        //     min: 0,
                        //     max: 10,
                        //     alias: "计划产值"
                        // }
                    });



                    chart.tooltip({
                        showCrosshairs: false,
                        shared: true,
                    });


                    // chart.label('monthValue', (xValue) => {
                    //         return {
                    //             content: xValue + '%',
                    //         };
                    //     });

                    chart.axis(true);  // 是否显示坐标轴
                    // chart.axis('nlp', false);

                    // chart.legend({
                    //     custom: true,
                    //     items: [
                    //         { name: '实际产值', value: 'value', marker: { symbol: 'line', style: { stroke: '#51EDE4', lineWidth: 2 } } },
                    //         // { name: '计划产值', value: 'planValue', marker: { symbol: 'line', style: { stroke: '#1A9BFE', lineWidth: 2 } } },
                    //     ],
                    //     // itemFormatter() {
                    //     //     return val; // val 为每个图例项的文本值
                    //     // }
                    // });

                    // chart.legend(false); 
                    //{数据源名称：替换的名称}
                    // chart.legend('monthValue', {
                    //     itemFormatter(val) {
                    //         return "1234"; // val 为每个图例项的文本值
                    //     }
                    // });





                    chart.line().position('month*value').color('#51EDE4').shape('smooth');;
                    // chart.line().position('time*planValue').color('#1A9BFE').shape('smooth');;
                    chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
                    chart.render();
                })
                .catch((error) => {
                    console.log("错误:", error);
                });
        }

    },
};
</script>
<style src="./css/page07.css" scoped>
</style>
